import VConsole from "vconsole";
/** 触发需要的点击次数 */
const TRIGGER_VALUE = 5,
	/** 点击间隔 */
	INTERVAL = 1000;
/** 点击次数 */
let count = 0,
	/** vConsole 实例 */
	vConsoleInstance: VConsole | null = null,
	/** 当前面板是否展示 */
	panelShow = false,
	/** 点击计时器 */
	timer: NodeJS.Timeout | null = null;

/**
 * 切换 vConsole状态
 * @param flag true: 展示; false: 隐藏
 */
const visible = (flag: boolean) => {
	if (flag) {
		// 显示按钮
		vConsoleInstance?.showSwitch();
	} else {
		// 隐藏主面板
		vConsoleInstance?.hide();
		// 隐藏切换按钮
		vConsoleInstance?.hideSwitch();
	}
};

/** 清空计时器方法 */
const clearTimer = () => {
	if (timer) {
		clearTimeout(timer);
		timer = null;
	}
};

/** 绑定dom的点击事件 */
const domClick = () => {
	// 计数加一
	count++;
	// 清空计时器，重新计时
	clearTimer();
	timer = setTimeout(() => {
		count = 0;
		clearTimer();
	}, INTERVAL);
	// 达到触发条件，更改显示状态
	if (count >= TRIGGER_VALUE) {
		visible(!panelShow);
		panelShow = !panelShow;
		count = 0;
		clearTimer();
	}
};

const vConsole = {
	mounted(el: HTMLElement) {
		vConsoleInstance = new VConsole();
		visible(false);
		el.addEventListener("click", domClick);
	}
};

export default vConsole;
